<template>
    <div>
        <el-form ref="user" :model="user" :rules="rules" label-width="80px" status-icon>
            <el-form-item prop="user_uname" :required="true" label="用户名">
                <el-input v-model="user.user_uname" placeholder="用户名" clearable size="small" type="text" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item prop="user_password" :required="true" label="密码">
                <el-input v-model="user.user_password" placeholder="密码" clearable size="small" type="password" style="width: 200px">
                </el-input>
            </el-form-item>
            <el-form-item prop="checkPwd" :required="true" label="确认密码">
                <el-input
                    v-model="user.checkPwd"
                    placeholder="确认密码"
                    clearable
                    size="small"
                    type="password"
                    style="width: 200px"
                ></el-input>
            </el-form-item>

            <el-form-item label="姓名">
                <el-input v-model="user.user_name" placeholder="姓名" clearable size="small" type="text" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="user.user_sex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="user_phone" :required="true" label="手机">
                <el-input v-model="user.user_phone" placeholder="手机号" clearable size="small" type="text" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item
                prop="user_email"
                label="邮箱"
                :required="true"
                :rules="[
                    { required: true, message: '请输入邮箱地址！', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ]"
            >
                <el-input v-model="user.user_email" placeholder="邮箱" clearable size="small" type="text" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input
                    v-model="user.user_address"
                    placeholder="默认地址"
                    clearable
                    size="small"
                    type="text"
                    style="width: 200px"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('user')">注册</el-button>
                <el-button @click="resetForm('user')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'Register',
    data() {
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.user.checkPwd !== '') {
                    this.$refs.user.validateField('checkPwd');
                }
                callback();
            }
        };
        const validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.user.user_password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            user: {
                user_uname: '',
                user_password: '',
                checkPwd: '',
                user_phone: '',
                user_email: '',
                user_name: '',
                user_address: '',
                user_sex: 1
            },
            param: {
                sex: ''
            },
            rules: {
                user_name: [
                    { required: true, message: '请输入用户名!', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度为6-12 个字符!', trigger: 'blur' }
                ],
                user_password: [{ validator: validatePass, trigger: 'blur' }],
                checkPwd: [{ validator: validatePass2, trigger: 'blur' }],
                user_phone: [
                    { required: true, message: '请输入手机号!', trigger: 'blur' },
                    { min: 8, max: 11, message: '请正确输入手机号!', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        // 提交表单前数据验证
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.userRegister();
                } else {
                    return false;
                }
            });
        },
        // 重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 用户注册
        userRegister() {
            const loading = this.$loading({
                lock: true,
                text: '正在注册中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            if (this.user.user_sex == 1) {
                this.param.sex = '男';
            } else {
                this.param.sex = '女';
            }

            // 发送json数据，后端可使用requestBody，和map接收
            this.$axios({
                method: 'post',
                url: 'user/register',
                data: {
                    user_uname: this.user.user_uname,
                    user_password: this.user.user_password,
                    user_name: this.user.user_name,
                    user_phone: this.user.user_phone,
                    user_address: this.user.user_address,
                    user_email: this.user.user_email,
                    user_sex: this.param.sex
                },
                headers: { 'Content-Type': 'application/json' }
            })
                .then((response) => {
                    loading.close();
                    if (response.data.code == 1) {
                        if (response.data.result === 'is exist') {
                            this.$message({
                                showClose: true,
                                message: '此用户名或手机号已注册！',
                                type: 'warning'
                            });
                        } else {
                            this.$message({
                                showClose: true,
                                message: '注册成功！',
                                type: 'success'
                            });
                        }
                    } else {
                        this.$notify.error({
                            showClose: true,
                            title: '错误',
                            message: '注册失败！'
                        });
                    }
                })
                .catch(function (error) {
                    this.$notify.error({
                        showClose: true,
                        title: '错误',
                        message: '服务器出错啦！'
                    });
                });
        }
    }
};
</script>

<style scoped>
</style>
